import React, { useState } from 'react'
import { Tag, Button, Modal, Form, Divider, Input, Select, message, InputNumber } from 'antd'
import { PlusSquareOutlined, MinusSquareOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import request from '@/utils/request'
import styles from './manage.less'

const { Option } = Select
const { confirm } = Modal

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};
export default (props: any) => {
    const { id, attrList, getAttrList } = props
    const [modalVisable, setModalVisable] = useState(false)
    const [specItems, setSpecItems] = useState([1])
    const [attrId, setAttrId] = useState(0)

    const [form] = Form.useForm()

    const onFinish = (values: any) => {
        values.genre_id = id
        values.type = Number(values.type)
        request(`/goods/genre-attr/${attrId}`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            if (result.code !== 200) {
                message.warning(result.message)
                return
            }
            message.success(result.message)
            setModalVisable(false)
            getAttrList(id)
        })
    }

    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/goods/genre-attr-destroy`, {
                    method: "Delete",
                    params: { ids },
                }).then((result) => {
                    message.success("删除成功")
                    getAttrList(id)
                })
            }
        });
    }

    return (
        <div>
            <Button type="primary" ghost onClick={() => {
                setAttrId(0)
                setModalVisable(true)
                form.resetFields()
            }}>添加属性</Button>
            <Divider />
            <table className={styles.table}>
                <thead>
                    <tr>
                        <th style={{ width: "150px" }} >属性名称</th>
                        <th style={{ width: "80px", textAlign: "center" }}>属性类型</th>
                        <th style={{ width: "80px", textAlign: "center" }}>排序</th>
                        <th>属性值</th>
                        <th style={{ width: "120px", textAlign: "center" }}>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        attrList.map((item: any, inx: number) => {
                            return (
                                <tr key={inx}>
                                    <td>{item.title}</td>
                                    <td style={{ textAlign: "center" }}> <Tag color="cyan">{item.type_title}</Tag> </td>
                                    <td style={{ textAlign: "center" }}><Tag>{item.sort}</Tag> </td>
                                    <td>{item.value_list.join("，")}</td>
                                    <td style={{ textAlign: "center" }}>
                                        <Button size="small" type="primary" ghost style={{ marginRight: "4px" }} onClick={() => {
                                            setAttrId(item.id)
                                            setModalVisable(true)
                                            request(`/goods/genre-attr/${item.id}`).then((result) => {
                                                const data = result.data;
                                                setSpecItems(data.value_list)
                                                form.setFieldsValue(data)
                                            })
                                        }}>修改</Button>
                                        <Button size="small" danger onClick={() => {
                                            destroy([item.id])
                                        }}>删除</Button>
                                    </td>
                                </tr>
                            )
                        })
                    }

                </tbody>
            </table>
            <Modal
                title="属性"
                visible={modalVisable}
                getContainer={false}
                onOk={() => {
                    form.submit()
                }}
                onCancel={() => {
                    setModalVisable(false)
                }}
            >
                <Form
                    {...layout}
                    onFinish={onFinish}
                    form={form}
                    initialValues={{ type: 1 }}
                >
                    <Form.Item label="属性名称" required name="title"
                        rules={[{ required: true, message: '请输入属性名称' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="属性类型" required name="type"
                        rules={[{ required: true, message: '请输入属性类型' }]}
                    >
                        <Select style={{ width: "120px" }}>
                            <Option value={1}>单选</Option>
                            <Option value={2}>多选</Option>
                            <Option value={3}>输入</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="排序" name="sort">
                        <InputNumber style={{ width: "70px" }} />
                    </Form.Item>
                    {


                        specItems.map((item, inx) => {
                            return (
                                <Form.Item
                                    label={inx == 0 ? "属性值" : " "}
                                    key={inx}
                                    colon={inx == 0}
                                >
                                    <Form.Item
                                        name={["value_list", inx]}
                                        noStyle
                                    >
                                        <Input style={{ width: "94%" }} />
                                    </Form.Item>
                                    <span style={{ width: "6%", cursor: "pointer", display: "inline-block", textAlign: "right" }}>
                                        {inx == 0 ? <PlusSquareOutlined onClick={() => {
                                            if (specItems.length >= 5) {
                                                message.error('最多添加五项');
                                                return
                                            }
                                            let result: any = [...specItems];
                                            result.push(1);
                                            setSpecItems(result)

                                        }} /> : <MinusSquareOutlined onClick={() => {
                                            let result: any = [...specItems];
                                            result.pop(1);
                                            setSpecItems(result)
                                        }} />}
                                    </span>
                                </Form.Item>
                            )
                        })
                    }
                </Form>
            </Modal>
        </div >
    )
}